<script>
import { getLiberJsonData, getCatalogueData } from "../api/liber.js";
import { useRouter, useRoute } from "vue-router";
import { reactive, onBeforeUnmount } from "vue";
import { useStore } from "../store/book";
// import { Toast } from 'vant';
export default {
  setup() {
    let router = useRouter(); //实例化路由
    let route = useRoute(); //实例化路由
    let data = reactive({
      liberList: [], //遍历数据
      title: "", //标题
      pageN: 0, //游标
      index: 1, //下标
      page: 20, //页码
      pass: true, //是否解锁
      elshow: null, //控制面板显示隐藏
      fontshow: null, //控制面板显示隐藏
      directory: null, //全书进度
      shows: false, //目录显示隐藏
      volumes: [], //目录数据
      volumeName: "", //目录名称
      tagName: null, //二级目录名称
      libers: "45309722", //章节id
      books: "3381946", //书本id
      volumeId: "15353378", //大章节id
      coverImg: "", //书本封面
      bookName: "", //书名
      volumeindex: 0, //大章节下标
      font: "默认", //字体
      fontheigth: 30, //字间距
      fontsize: 22, //字体大小
      ptag: "", //判断是否选中字体
      hsla: 0, //第一个参数
      hslb: 0, //第二个参数
      hslc: 97, //第三个参数
      hsld: 0, //字体第一个参数
      hsle: 0, //字体第二个参数
      hslf: 29, //字体第三个参数
      bacflag: "0", //切换主题颜色
      segment: [], //段评
      chapterlists: [], //章评
      bookreview: [], //书评
    });

    // 初始化路由传的参数
    data.volumeId = route.query.volumeId;
    data.libers = route.query.libers;
    data.books = route.query.books;

    let store = useStore(); //实例化book属性
    let bookindex = store.book.findIndex((item) => item.books == data.books);
    if (bookindex == -1) {
      //判断菠萝中是否存在书本
      store.book.push({
        volumeId: route.query.volumeId,
        libers: route.query.libers,
        books: route.query.books,
        font: "默认",
        fontheigth: 30,
        fontsize: 22,
      });
    } else {
      let booklist = store.book[bookindex];
      // 初始化字体状态
      data.libers = booklist.libers;
      data.books = booklist.books;
      // data.font = booklist.font;
      data.fontheigth = booklist.fontheigth; //行高
      data.fontsize = booklist.fontsize; //字体大小
      data.hsla = booklist.hsla; //第一个参数
      data.hslb = booklist.hslb; //第二个参数
      data.hslc = booklist.hslc; //第三个参数
      data.hsld = booklist.hsld; //字体第一个参数
      data.hsle = booklist.hsle; //字体第二个参数
      data.hslf = booklist.hslf; //字体第三个参数
      data.bacflag = booklist.bacflag; //切换主题颜色
    }

    // 字体列表
    let fontlist = [
      { font: "", name: "默认" },
      { font: "LanTing", name: "小米兰亭" },
      { font: "SIMYOU", name: "幼圆" },
      { font: "sharp", name: "真言简2.0细体" },
      { font: "FZSJ", name: "柠檬不萌拼音" },
    ];

    // 主题颜色列表
    // background: hsl(220, 31%, 23%);
    let baclist = [
      { a: 0, b: 0, c: 97, d: 0, e: 0, f: 29 },
      { a: 43, b: 63, c: 73, d: 23, e: 42, f: 40 },
      { a: 126, b: 51, c: 86, d: 116, e: 19, f: 31 },
      { a: 10, b: 95, c: 93, d: 340, e: 33, f: 38 },
      { a: 210, b: 96, c: 90, d: 220, e: 21, f: 46 },
      { a: 220, b: 31, c: 23, d: 221, e: 22, f: 50 },
    ];

    // 传入ID
    let params = {
      books: data.books,
      libers: data.libers,
    };

    let pageFun = () => {
      router.push({
        path: "/page",
        query: {
          books: data.books,
          libers: data.libers,
          volumeId: data.volumeId,
        },
      });
    };

    // 获取进入阅读界面时间戳
    // console.log(new Date().getTime());
    let begintime = new Date().getTime();
    onBeforeUnmount(() => {
      // 获取离开阅读界面时间戳
      // console.log("离开",new Date().getTime());
      let endTime = new Date().getTime();
      if (!localStorage.getItem("duration")) {
        let time = endTime - begintime;
        window.localStorage.setItem("duration", time);
      } else {
        let oldtiem = localStorage.getItem("duration");
        let newtime = oldtiem * 1 + (endTime - begintime) * 1;
        // console.log(newtime);
        window.localStorage.setItem("duration", newtime);
      }

      // 更新菠萝状态
      let saveindex = store.book.findIndex((item) => item.books == data.books);
      // console.log(saveindex);
      store.book[saveindex].volumeId = data.volumeId; //目录id
      store.book[saveindex].libers = data.libers; //章节id
      store.book[saveindex].books = data.books; //书本id
      store.book[saveindex].coverImg = data.coverImg; //书本封面
      store.book[saveindex].bookName = data.bookName; //书名
      store.book[saveindex].font = data.font; //字体
      store.book[saveindex].fontheigth = data.fontheigth; //字间距
      store.book[saveindex].fontsize = data.fontsize; //字体大小
      store.book[saveindex].hsla = data.hsla; //第一个参数
      store.book[saveindex].hslb = data.hslb; //第二个参数
      store.book[saveindex].hslc = data.hslc; //第三个参数
      store.book[saveindex].hsld = data.hsld; //字体第一个参数
      store.book[saveindex].hsle = data.hsle; //字体第二个参数
      store.book[saveindex].hslf = data.hslf; //字体第三个参数
      store.book[saveindex].bacflag = data.bacflag; //切换主题颜色
    });

    // 定义一条替身数组

    let oldlists = [];
    //内容详情数据
    getLiberJsonData(params).then((item) => {
      data.title = item.data.name; //获取标题
      oldlists = item.data.content[0].text.split("\n"); //切割字符串转数组
      data.page = Math.ceil(oldlists.length / 5);
      // console.log("oldlists1", oldlists.length / 5);
      data.liberList = oldlists.slice(data.pageN, data.pageN + 5); //切割分页
    });

    // 目录详情数据
    getCatalogueData(params).then((item) => {
      data.volumes = item.data.volumes;
      let index = data.volumes.findIndex(
        (item) => item.volumeId == data.volumeId
      );
      console.log("@@@volumes.length", data.volumes.length);
      data.volumeindex = index; //大章节下标
      data.coverImg = item.data.coverImg; //封面
      data.bookName = item.data.bookName; //书名
      console.log("  data.coverImg", data.coverImg);
      data.volumeName = item.data.volumes[index].volumeName;
    });

    // 下一页
    let NextFun = () => {
      if (data.index == Math.ceil(oldlists.length / 5)) {
        //限制点击范围

        // 切换下一章
        let index = data.volumes[data.volumeindex].chapters.findIndex(
          (item) => item.chapterId == data.libers
        );

        // 重新赋值章节ID
        data.libers =
          data.volumes[data.volumeindex].chapters[index + 1].chapterId;

        // Toast.fail("请输先购买再看")
        if (data.pass) {
          sectionFun(data.libers); //调用切换章节的方法
        }
        return (data.index = 1), (data.pageN = 0);
      }

      data.pageN += 5; //切割游标
      data.index += 1; //页标

      data.liberList = oldlists.slice(data.pageN, data.pageN + 5);

      // 隐藏顶部以及底部控制面板
      if (!data.elshow) {
        //首次不加类名。避免提前触发动画
        return 0;
      }
      data.elshow = "leave"; //隐藏
    };

    // 上一页
    let PrevFun = () => {
      if (data.pageN == 0) {
        //限制点击范围

        // 切换上一章
        let index = data.volumes[data.volumeindex].chapters.findIndex(
          (item) => item.chapterId == data.libers
        );

        // 重新赋值章节ID
        if (index != 0) {
          data.libers =
            data.volumes[data.volumeindex].chapters[index - 1].chapterId;
        } else {
          return data.libers;
        }

        sectionFun(data.libers); //调用切换章节的方法

        return (data.pageN = 0), (data.index = 1);
      }

      data.pageN -= 5; //切割游标
      data.index -= 1; //页标

      data.liberList = oldlists.slice(data.pageN, data.pageN + 5);

      if (!data.elshow) {
        return 0;
      }
      data.elshow = "leave"; //隐藏
    };

    // 显示控制面板
    let ElshowFun = () => {
      if (!data.elshow) {
        return (data.elshow = "show");
      }

      if (data.elshow == "show") {
        return (data.elshow = "leave");
      } else if (data.elshow == "leave") {
        return (data.elshow = "show");
      }
    };

    // 主题颜色
    let bacFun = (item, index) => {
      // console.log(item);
      data.hsla = item.a; //第一个参数
      data.hslb = item.b; //第二个参数
      data.hslc = item.c; //第三个参数
      data.hsld = item.d; //第一个参数
      data.hsle = item.e; //第二个参数
      data.hslf = item.f; //第三个参数
      data.bacflag = index;
    };

    // 显示字体面板
    // let FontshowFun = ()=>{
    //   if (!data.fontshow) {
    //     return (data.fontshow = "showfont");
    //   }

    //   if (data.fontshow == "showfont") {
    //     return (data.fontshow = "leavefont");
    //   } else if (data.fontshow == "leavefont") {
    //     return (data.fontshow = "showfont");
    //   }
    // }

    // 切换字体
    let fontFun = (font) => {
      // console.log(font);
      data.font = font; //同步响应式数据
      data.ptag = font; //同步切换类名
    };

    // 控制行高
    let fontHeigthFun = (size) => {
      console.log(size);
      if (size == "up") {
        if (data.fontheigth >= 60) {
          return (data.fontheigth = 60);
        }
        data.fontheigth += 1;
      } else if (size == "down") {
        if (data.fontheigth <= 10) {
          return (data.fontheigth = 10);
        }
        data.fontheigth -= 1;
      }
    };

    // 控制字体大小
    let fontSizeFun = (size) => {
      console.log(size);
      if (size == "sizemax") {
        if (data.fontsize >= 36) {
          return (data.fontsize = 36);
        }
        data.fontsize += 1;
      } else if (size == "sizemin") {
        if (data.fontsize <= 12) {
          return (data.fontsize = 12);
        }
        data.fontsize -= 1;
      }
    };

    // 亮度控制
    let luminanceFun = (size) => {
      // console.log(size);
      if (size == "up") {
        if (data.hslc >= 100 || data.hslf <= 0) {
          return data.hslc, data.hslf;
        }
        console.log(data.hslc, data.hslf);
        data.hslc += 5;
        data.hslf -= 5;
      } else if (size == "down") {
        if (data.hslc <= 0 || data.hslf >= 100) {
          return data.hslc, data.hslf;
        }
        console.log(data.hslc, data.hslf);
        data.hslc -= 5;
        data.hslf += 5;
      }
    };

    // 段评
    let discuss = (index) => {
      console.log(index);
      console.log("data", data.index);
    };

    // 目录
    let showFun = () => {
      data.shows = true;
      if (!data.elshow) {
        return 0;
      }
      data.elshow = "leave"; //隐藏
    };

    // 展示二级目录
    let tagNameFun = (value) => {
      console.log(value);
      if (!data.tagName || data.tagName != value) {
        return (data.tagName = value);
      } else if (data.tagName == value) {
        return (data.tagName = null);
      }
    };

    // 切换章节
    let sectionFun = (id) => {
      oldlists = [];
      console.log("@@@@", data.volumeindex);
      console.log("id", id);
      data.libers = id;
      params.libers = id;
      getLiberJsonData(params)
        .then((item) => {
          //内容详情数据
          data.title = item.data.name; //获取标题

          oldlists = item.data.content[0].text.split("\n"); //切割字符串转数组

          data.page = Math.ceil(oldlists.length / 5); //总页数

          data.liberList = oldlists.slice(data.pageN, data.pageN + 5); //切割分页
        })
        .then(() => {
          data.shows = false;
        });
    };

    // 返回书架
    let goBooks = () => {
      router.push("/shelf");
    };

    return {
      data, //全部数据
      fontlist, //字体列表(非响应式)
      baclist, //主题颜色列表(非响应式)
      NextFun, // 下一页
      PrevFun, // 上一页
      ElshowFun, // 显示控制面板
      // FontshowFun, // 显示字体控制面板
      showFun, // 目录
      tagNameFun, // 展示二级目录
      goBooks, // 返回主页
      sectionFun, //切换章节
      fontFun, //切换字体方法
      fontHeigthFun, //字行高方法
      fontSizeFun, //字大小方法
      discuss, //段评论方式
      bacFun, //切换主题方法
      luminanceFun, //亮度方法
      pageFun, //返回详情方法
    };
  },
};
</script>

<template>
  <div class="liber">
    <!-- 上一页 -->
    <div class="left" @click="PrevFun"></div>
    <!-- 显示控制面板 -->
    <div class="midde" @click="ElshowFun"></div>
    <!-- 下一页 -->
    <div class="rigth" @click="NextFun"></div>

    <!-- 目录 -->
    <van-popup
      v-model:show="data.shows"
      position="left"
      :style="{
        width: '70%',
        height: '100%',
        'font-family': data.font,
        background: `hsl(${data.hsla},${data.hslb}%,${data.hslc}%)`,
        color: `hsl(${data.hsld},${data.hsle}%,${data.hslf}%)`,
      }"
    >
      <div class="popup-box" v-if="data.volumes">
        <div class="lists" v-for="item in data.volumes" :key="item.volumeId">
          <div
            :class="['title', item.volumeName == data.volumeName ? 'con' : '']"
            @click="tagNameFun(item.volumeName)"
          >
            {{ item.volumeName }}
          </div>
          <div
            :class="['items', item.chapters.length > 14 ? 'longitem' : '']"
            v-if="data.tagName == item.volumeName"
          >
            <p
              v-for="value in item.chapters"
              :key="value.chapterId"
              :class="[data.libers == value.chapterId ? 'con' : '']"
              @click="sectionFun(value.chapterId)"
            >
              {{ value.chapterName }}
            </p>
            <i></i>
          </div>
        </div>
      </div>
    </van-popup>

    <!-- 章节信息 -->
    <div
      class="tagmsg"
      :style="{
        'font-family': data.font,
        background: `hsl(${data.hsla},${data.hslb}%,${data.hslc}%)`,
        color: `hsl(${data.hsld},${data.hsle}%,${data.hslf}%)`,
      }"
    >
      <span>本章进度:{{ data.index }}/{{ data.page }}</span>
      <span>{{ data.volumeName }}10%</span>
    </div>
    <!-- 顶部控制面板 -->
    <div
      :class="[
        'control',
        data.elshow == 'show' ? 'show' : '',
        data.elshow == 'leave' ? 'leave' : '',
      ]"
      :style="{
        'font-family': data.font,
        background: `hsl(${data.hsla},${data.hslb}%,${data.hslc}%)`,
        color: `hsl(${data.hsld},${data.hsle}%,${data.hslf}%)`,
      }"
    >
      <div class="control-box">
        <i class="iconfont icon-shuben" @click="goBooks"></i>
        <i class="iconfont icon-shezhi" @click="pageFun"></i>
      </div>
    </div>

    <!-- 底部控制面板 -->

    <div
      :class="[
        'control-bottom',
        data.elshow == 'show' ? 'bottom-show' : '',
        data.elshow == 'leave' ? 'bottom-leave' : '',
      ]"
      :style="{
        'font-family': data.font,
        background: `hsl(${data.hsla},${data.hslb}%,${data.hslc}%)`,
        color: `hsl(${data.hsld},${data.hsle}%,${data.hslf}%)`,
      }"
    >
      <!-- 亮度控制 -->
      <div classd="nance"></div>

      <!-- 背景颜色 -->
      <div class="luminance">
        <div
          v-for="(item, index) in baclist"
          :key="index"
          :class="['luitem', data.bacflag == index ? 'con' : ' ']"
          :style="{
            background: `hsl(${item.a},${item.b}%,${item.c}%)`,
          }"
          @click="bacFun(item, index)"
        ></div>
      </div>

      <!-- 控制字体 -->
      <div
        class="fonts"
        :style="{
          'font-family': data.font,
          background: `hsl(${data.hsla},${data.hslb}%,${data.hslc}%)`,
          color: `hsl(${data.hsld},${data.hsle}%,${data.hslf}%)`,
        }"
      >
        <div
          class="fontsize"
          :style="{
            border: `1px solid hsl(${data.hsld},${data.hsle}%,${data.hslf}%)`,
          }"
        >
          <div
            class="fontitem"
            :style="{
              'border-right': `1px solid hsl(${data.hsld},${data.hsle}%,${data.hslf}%)`,
            }"
            @click="fontSizeFun('sizemin')"
          >
            A-
          </div>
          <div
            class="fontitem"
            :style="{
              'border-right': `1px solid hsl(${data.hsld},${data.hsle}%,${data.hslf}%)`,
            }"
          >
            {{ data.fontsize }}
          </div>
          <div class="fontitem" @click="fontSizeFun('sizemax')">A+</div>
        </div>

        <div
          class="fontfamily"
          :style="{
            border: `1px solid hsl(${data.hsld},${data.hsle}%,${data.hslf}%)`,
          }"
        >
          {{ data.font }}
        </div>
      </div>

      <!-- 控制字体间距 -->
      <div
        class="fontes"
        :style="{
          'font-family': data.font,
          background: `hsl(${data.hsla},${data.hslb}%,${data.hslc}%)`,
          color: `hsl(${data.hsld},${data.hsle}%,${data.hslf}%)`,
        }"
      >
        <div class="fontheigth">
          <div
            class="fontitem"
            @click="fontHeigthFun('down')"
            :style="{
              border: `1px solid hsl(${data.hsld},${data.hsle}%,${data.hslf}%)`,
            }"
          >
            间距-
          </div>
          <div
            class="fontitem"
            @click="fontHeigthFun('up')"
            :style="{
              border: `1px solid hsl(${data.hsld},${data.hsle}%,${data.hslf}%)`,
            }"
          >
            间距+
          </div>
          <div
            class="fontitem"
            @click="luminanceFun('up')"
            :style="{
              border: `1px solid hsl(${data.hsld},${data.hsle}%,${data.hslf}%)`,
            }"
          >
            亮度+
          </div>
          <div
            class="fontitem"
            @click="luminanceFun('down')"
            :style="{
              border: `1px solid hsl(${data.hsld},${data.hsle}%,${data.hslf}%)`,
            }"
          >
            亮度-
          </div>
        </div>
      </div>
    </div>

    <!-- 底部控制面板big -->
    <!-- <div
      :class="[
        'control-bottom-fonts',
        data.fontshow == 'showfont' ? 'bottom-fonts-show' : '',
        data.fontshow == 'leavefont' ? 'bottom-fonts-leave' : '',
      ]"
      :style="{
        'font-family': data.font,
        background: `hsl(${data.hsla},${data.hslb}%,${data.hslc}%)`,
        color: `hsl(${data.hsld},${data.hsle}%,${data.hslf}%)`,
      }"
    >
      <div class="plists">
        <p
          v-for="item in fontlist"
          :key="item.name"
          :class="[data.ptag == item.font ? 'con' : '']"
          @click="fontFun(item.font)"
        >
          {{ item.name }}
        </p>
      </div>
    </div> -->

    <!-- 章节标题 -->
    <div
      class="books-title"
      :style="{
        'font-family': data.font,
        background: `hsl(${data.hsla},${data.hslb}%,${data.hslc}%)`,
        color: `hsl(${data.hsld},${data.hsle}%,${data.hslf}%)`,
      }"
    >
      <span>{{ data.title }}</span>
    </div>

    <!-- 章节内容 -->
    <div
      class="books-contain"
      @click="showFun"
      :style="{
        'font-family': data.font,
        background: `hsl(${data.hsla},${data.hslb}%,${data.hslc}%)`,
        color: `hsl(${data.hsld},${data.hsle}%,${data.hslf}%)`,
      }"
    >
      <div
        class="ptag"
        v-for="(item, index) in data.liberList"
        :key="index"
        :style="{
          'font-family': data.font,
          'font-size': `${data.fontsize}px`,
          'line-height': `${data.fontheigth}px`,
        }"
      >
        {{ item }}
        <i
          class="iconfont icon-duihuaqipao"
          :style="{
            'font-size': `${data.fontsize}px`,
            display: 'none',
          }"
          @click.stop="discuss(index)"
        >
        </i>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.liber {
  position: relative;
  top: 0px;
  overflow: hidden;
  .rigth {
    //下一页
    width: 35%;
    height: 100vh;
    position: absolute;
    // background-color: rgba(255, 0, 0, 0.2);
    right: 0px;
    z-index: 9;
  }
  .midde {
    //控制组件
    width: 30%;
    height: 60vh;
    position: absolute;
    // background-color: rgba(0, 0, 255, 0.2);
    top: 0px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    z-index: 10;
  }
  .left {
    //上一页
    width: 35%;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
    // background-color: rgba(0, 255, 255, 0.2);
    z-index: 10;
  }

  .control-box {
    box-shadow: 0px 0px 6px #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon-shuben {
      font-size: 26px;
      line-height: 40px;
      margin-left: 10px;
    }
    .icon-shezhi {
      font-size: 20px;
      line-height: 40px;
      margin-right: 10px;
    }
  }

  .popup-box {
    // 目录
    .lists {
      .title {
        height: 50px;
        line-height: 50px;
        font-weight: 800;
        background-color: rgb(236, 232, 232);
        color: #999;
        font-size: 18px;
        padding: 0px 10px;
        box-shadow: 0px 0px 1px rgba(209, 6, 240, 0.2);
        position: sticky;
        top: 0px;
      }
      .title.con {
        color: #333;
      }
      .items {
        p {
          width: 100%;
          height: 40px;
          line-height: 40px;
          box-sizing: border-box;
          font-size: 14px;
          padding: 0px 12px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        p.con {
          font-weight: 800;
        }
      }
      .items.longitem {
        height: 560px;
        overflow: scroll;
      }
    }
  }

  .tagmsg {
    //底部信息
    position: absolute;
    display: flex;
    justify-content: space-between;
    bottom: 0px;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    text-indent: 12px;
    width: 100%;
    background: rgb(255, 255, 255);
    z-index: 80;
    span {
      margin-right: 12px;
    }
  }

  .control {
    //顶部
    position: absolute;
    top: -40px;
    z-index: 999;
    box-shadow: 0px 0px 6px #fff;
    background: #4a4a4a;
  }

  .control-bottom {
    //底部
    position: absolute;
    bottom: -26vh;
    z-index: 12;
    height: 20vh;
    background: red;
    box-shadow: 0px 0px 6px #fff;
    width: 100%;
    z-index: 99;

    /* 亮度控制 */

    /* 背景颜色切换 */
    .luminance {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 18px;
      .luitem {
        height: 30px;
        width: 30px;
        border-radius: 50%;
        overflow: hidden;
      }
      .luitem.con {
        border: 1px solid #a8858e;
      }
    }

    /* 字体控制 */
    .fonts {
      display: flex;
      margin-top: 18px;
      justify-content: space-around;
      color: #83475c;
      font-weight: 600;
      .fontsize {
        display: flex;
        border: 1px solid #83475c;
        border-radius: 10px;
        .fontitem {
          padding: 5px 32px;
          border-right: 1px solid #83475c;
          &:nth-last-child(1) {
            border-right: 0px;
          }
        }
      }
      .fontfamily {
        height: 32px;
        line-height: 32px;
        padding: 0px 12px;
        border: 1px solid #83475c;
        border-radius: 10px;
      }
    }

    /* 字体||背景控制 */
    .fontes {
      .fontheigth {
        display: flex;
        margin-top: 18px;
        font-weight: 600;
        justify-content: space-evenly;
        .fontitem {
          box-sizing: border-box;
          padding: 6px 20px;
          border: 1px solid #83475c;
          border-radius: 10px;
        }
      }
    }

    /* 行高按钮 */
    .fontheight {
      height: 30px;
      line-height: 30px;
      font-size: 30px;
      display: flex;
      justify-content: space-between;
    }
  }

  .control-bottom-fonts {
    //底部
    position: absolute;
    bottom: -30vh;
    z-index: 12;
    height: 20vh;
    background: red;
    box-shadow: 0px 0px 6px #fff;
    width: 100%;
    z-index: 99;
  }

  /* 顶部组件显示*/
  .control.show {
    height: 40px;
    width: 100%;
    animation: controlshow 1s;
    background: rgb(255, 218, 218);
    top: 0px;
  }

  /* 顶部组件隐藏*/
  .control.leave {
    height: 40px;
    width: 100%;
    animation: controlleave 1s;
    background: rgb(255, 218, 218);
    top: -50px;
  }

  /* 底部组件显示*/
  .control-bottom.bottom-show {
    height: 26vh;
    width: 100%;
    animation: control-bottomshow 1s;
    background: rgb(255, 218, 218);
    bottom: 0px;
  }

  /* 底部组件隐藏*/
  .control-bottom.bottom-leave {
    height: 20vh;
    width: 100%;
    animation: control-bottomleave 1s;
    background: rgb(255, 218, 218);
    bottom: -20vh;
  }

  /* 底部字体组件显示*/
  .control-bottom-fonts.bottom-fonts-show {
    height: 30vh;
    width: 100%;
    animation: control-fontshow 1s;
    background: rgb(255, 218, 218);
    bottom: 0px;
  }

  /* 底部字体组件隐藏*/
  .control-bottom-fonts.bottom-fonts-leave {
    height: 30vh;
    width: 100%;
    animation: control-fontsleave 1s;
    background: rgb(255, 218, 218);
    bottom: -30vh;
  }

  /*标题*/
  .books-title {
    //章节顶部标题
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    font-weight: 800;
    text-indent: 1em;
    box-shadow: 0px 0px 5px #ccc;
  }

  .books-contain {
    height: 627px;
    box-sizing: border-box;
    padding: 0px 15px;
    overflow: scroll;
    .ptag {
      line-height: 30px;
      margin: 16px 0px;
      text-indent: 2em;
      &:nth-last-child(1) {
        margin-bottom: 45px;
      }
      .icon-duihuaqipao {
        width: 16px;
        height: 16px;
        position: relative;
        z-index: 12;
        text-align: center;
      }
    }
  }
}

/* 顶部组件进入动画 */
@keyframes controlshow {
  0% {
    top: -50px;
  }
  75% {
    top: 10px;
  }
  100% {
    top: 0px;
  }
}

/* 顶部组件离开动画 */
@keyframes controlleave {
  0% {
    top: 0px;
  }
  100% {
    top: -50px;
  }
}

/* 底部组件进入动画 */
@keyframes control-bottomshow {
  0% {
    bottom: -20vh;
  }
  100% {
    bottom: 0px;
  }
}

/* 底部组件离开动画 */
@keyframes control-bottomleave {
  0% {
    bottom: 0px;
  }
  100% {
    bottom: -26vh;
  }
}

/* 底部字体组件进入动画 */
@keyframes control-fontsleave {
  0% {
    bottom: -30vh;
  }
  100% {
    bottom: 0px;
  }
}

/* 底部字体组件离开动画 */
@keyframes control-bottomleave {
  0% {
    bottom: 0px;
  }
  100% {
    bottom: -30vh;
  }
}
</style>